<template>
  <div class="search_body">
    <div class="search_input">
      <div class="search_input_wrapper">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" v-model="message"/>
         <div class="radio">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">电影</label>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">影院</label>
         </div>
      </div>
    </div>
    <div class="search_result">
      <h3 v-if="picked=='One'">电影/电视剧/综艺</h3>
      <h3 v-else-if="picked=='Two'">影院</h3>
      <ul v-if="picked=='One' && moviesList">
        <li v-for="item in moviesList" :key="item.id">
          <div class="img">
            <img :src="item.img | setWH('128.180')" />
          </div>
          <div class="info">
            <p> 
              <span>{{item.nm}}</span> <img v-if="item.version" src="@/assets/maxs.png" alt="">
              &nbsp;&nbsp;<span>{{item.sc}}</span>
            </p>
            <p>{{item.enm}}</p>
            <p>{{item.cat}}</p>
            <p>{{item.rt}}</p>
          </div>
        </li>
      </ul>
      
    </div>
    <div class="cinema_body" v-if="picked=='Two' && cinemasList ">
          <ul>
              <li v-for="item in cinemasList" :key="item.id">
                <div>
                  <span>{{item.nm}}</span>
                  <span class="q"><span class="price">{{item.sellPrice}}</span> 元起</span>
                </div>
                <div class="address">
                  <span>{{item.addr}}</span>
                  <span>{{item.distance}}</span>
                </div>
                <div class="card">
                      <div>小吃</div>
                      <div>折扣卡</div>
                  </div>
              </li>
      	  </ul>
      </div>
  </div>
</template>

<script>
import {search} from '../../api/index'
import axios from 'axios'
export default {
  props: {},
  data() {
    return {
      picked:'One',
      message:'',
      moviesList:[],
      cinemasList:[]
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    message(newVal,oldVal){
       let that = this
       // 取消上一次请求
       this.cancelRequest()
       axios.get('/api/searchList?cityId=10&kw='+newVal,{
          cancelToken: new axios.CancelToken(function(c) {
             that.source = c;
          })
       }).then(result=>{
          console.log(result);
          if (result.data.msg==='ok' ) {
              this.cinemasList = result.data.data.cinemas.list
              this.moviesList = result.data.data.movies.list
          }
       }).catch((err) => {
          if (axios.isCancel(err)) {
              console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
          } else {
              //handle error
              console.log(err);
          }
        })  
        
     }
  },
  methods: {
      cancelRequest(){
         if (typeof this.source === 'function') {
            this.source('终止请求')
         }
      }
  },
  components: {}
};
</script>

<style scoped >
#content .search_body{ flex:1; overflow:auto; margin-top: 96px;}
.search_body .search_input{ padding: 8px 10px; padding-right: 137px;  background-color: #f5f5f5; border-bottom: 1px solid #e5e5e5;}
.search_body .search_input .radio {position: absolute; right: 0px; width: 34%; height: 28px;}
.search_body .search_input .radio input { padding: 0; width: 18%; margin: 0;}
.search_body .search_input .radio label {width: 30%;}
.search_body .search_input_wrapper{ padding: 0 10px; border: 1px solid #e6e6e6; border-radius: 5px; background-color: #fff; display: flex; line-height: 20px;}
.search_body .search_input_wrapper i{font-size: 16px; padding: 4px 0;}
.search_body .search_input_wrapper input{ border: none; font-size: 13px; color: #333; padding: 4px 0; outline: none; margin-left: 5px; width:100%;}
/* .search_body .search_result{} */
.search_body .search_result h3{ font-size: 15px; color: #999; padding: 9px 15px; border-bottom: 1px solid #e6e6e6;}
/* .search_body .search_result ul{} */
.search_body .search_result li{ border-bottom:1px #c9c9c9 dashed; padding: 10px 15px; box-sizing:border-box; display: flex;}
.search_body .search_result .img{ width: 60px; float:left; }
.search_body .search_result .img img{ width: 100%; }
.search_body .search_result .info{ float:left; margin-left: 15px; flex:1;}
.search_body .search_result .info p{ height: 22px; display: flex; line-height: 22px; font-size: 12px;}
.search_body .search_result .info p:nth-of-type(1) span:nth-of-type(1){ font-size: 18px; flex:1; }
.search_body .search_result .info p:nth-of-type(1) span:nth-of-type(2){ font-size: 16px; color:#fc7103;}

 .cinema_body{ flex:1; overflow:auto;}
.cinema_body ul{ padding:20px;}
.cinema_body li{  border-bottom:1px solid #e6e6e6; margin-bottom: 20px;}
.cinema_body div{ margin-bottom: 10px;}
.cinema_body .q{ font-size: 11px; color:#f03d37;}
.cinema_body .price{ font-size: 18px;}
.cinema_body .address{ font-size: 13px; color:#666;}
.cinema_body .address span:nth-of-type(2){ float:right; }
.cinema_body .card{ display: flex;}
.cinema_body .card div{ padding: 0 3px; height: 15px; line-height: 15px; border-radius: 2px; color: #f90; border: 1px solid #f90; font-size: 13px; margin-right: 5px;}
.cinema_body .card div.or{ color: #f90; border: 1px solid #f90;}
.cinema_body .card div.bl{ color: #589daf; border: 1px solid #589daf;}
</style>
